<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
	<meta charset="utf-8">
	<LINK href="../style/main_table.css"  th:href="@{/assets/style/main_table.css}" type=text/css rel=stylesheet>
     <script src="../js/vue.min.js" th:src ="@{/assets/js/vue.min.js}" type="text/javascript"></script>
	 <script src="../js/axios.js"  th:src = "@{/assets/js/axios.js}" type="text/javascript"></script>

  </head>
<title>单元信息输入</title>
<body>
      <div id="app1"><!--要有这个挂载点-->
        <table width="100%"  border="0"  align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td width="6"><img src="../../images/main_01.gif" th:src="@{/assets/images/main_01.gif}" width="6" height="6"/></td>
          <td width="981" bgcolor="#A3A3A3"><img src="../../images/main_02.gif"  th:src="@{/assets/images/main_02.gif}" width="560" height="6"></td>
          <td width="10"><img src="../../images/main_03.gif" th:src="@{/assets/images/main_03.gif}" width="6" height="6"/></td>
        </tr>
        <tr bgcolor="#F0F0F0">
          <td colspan="3" background="../../images/bg.gif" th:background="@{/assets/images/bg.gif}"  bgcolor="#F0F0F0" class="TABLE">
		  <table width="100%"  border="0" align="center" cellpadding="1" cellspacing="1" >
              <tr>
                <td background="../../images/main_title_bg1.gif" th:background="@{/assets/images/main_title_bg1.gif}">
				<table width="100%"  border="0" cellspacing="1" cellpadding="1">
                  <tr>
                    <td width="1%"><img src="../../images/dot9.gif" th:src="@{/assets/images/dot9.gif}" width="14" height="14"/></td>
                    <td width="99%">单元信息输入springboot+vue</td>
                  </tr>
                </table>
				</td>
              </tr>
              
              <tr><td>
             

              <table border=0 width=100%>
                <tr><td>单元名称:
                <input type=text name="name" v-model="name" size=15/>
                <input type=button value="查询"   v-on:click="getdataList">&nbsp;
                <input type=reset  value="清空"   v-on:click="resetfun">
                <input type=button value="增加"   onclick="window.location='/test/unit/add'">
				<input type=button value="批量删除"  @click="delALLData">
              </table>              
              </td>
              </tr>
               
              <tr>
                <td width="100%" class="TABLE5">
                <table class="table1" border=0 width="100%">
                  <tr align="center">
                    <td  nowrap width="8%" height="20" class="TD_title2">
                    <input type="checkbox" @click="selectAll" v-model='checkedALL'/>全选 
                    <td  nowrap width="40%" height="20" class="TD_title2"><strong>单元ID</strong></td>
                    <td  nowrap width="40%" height="20" class="TD_title2"><strong>单元名称</strong></td>
                    <td  nowrap width="20%" class="TD_title2"><strong>操作</strong></td>
                  </tr>
                  
               
                 
                 <!--加入数据开始--> 
				 <!--加入数据开始:这里的循环的：id,name是根据后台传来的json中的名字：默认是对象的属性名字-->
                   <tr v-for="(items,index) in datalist"  class='MenuItem'>
					   <!--将每一个checkbox控件绑定到一个数组：选中的话，则其值就会自动存入到数组中-->
	                  <td><input type="checkbox" name="item" v-model="checkList" :value="items.id"/></td>
	                  <td  align="center"  class="TD2" nowrap>{{items.id}}</td>
	                  <td  align="center"  class="TD2" nowrap>{{items.name}}</td>
	                  <td  align="center"  class="TD2" nowrap>
	                  <input type="button" value="删除" @click="del(items.id)"/>
					  <input type="button" value="修改" @click="modify(items)" />
	                  </td>
	                </tr>
					
                     <tr>
				     <td>&nbsp;	
						<td colspan="2">
						<input type="text" readonly v-model="rowtemplate.id"/>
				        <input type="text"  v-model="rowtemplate.name" />
					    <button type="button"  v-on:click="save">{{buttonname}}</button>
						</td>
						<td><div v-model="returnmsg"><font color=red>{{returnmsg}}</font></div></td>
						
				 </tr>
              
 
                    
                </table></td>
              </tr>
          </table></td>
        </tr>
        <tr>
          <td><img src="../../images/main_05.gif" th:src="@{/assets/images/main_05.gif}" width="6" height="6"/></td>
          <td  bgcolor="#A3A3A3"><img src="../../images/main_06.gif" th:src="@{/assets/images/main_06.gif}" width="560" height="6"/></td>
          <td><img src="../../images/main_07.gif" th:src="@{/assets/images/main_07.gif}" width="6" height="6"/></td>
        </tr>
      </table>

</div>

<script>
        var app1=new Vue({
            el:'#app1',
            data:{
                id:'',  //存修改时的主键的值
                name:'',
                datalist:[],
                checkedALL:false,//全选框
                checkList:[], //全选反选
				rowtemplate: { id: '', name: ''}, //模板数据对应一条记录，修改回显时传数据用,名字也是一样的才能赋值
                buttonname: "保存修改数据",
				returnmsg:'',
			},
            //钩子方法：创建页面时就调用获取数据显示
            created: function (){
                this.getdataList();
            },
			
			watch: { // 监视双向绑定的数据数组
					checkList: {
						handler(){ // 数据数组有变化将触发此函数
							if (this.checkList.length === this.datalist.length) {
								this.checked = true;
							} else {
								this.checked = false;
							}
						},
						deep: true // 深度监视
					}
			       },
			       
            methods: {
                getdataList:function () {
                    axios.get('/test/UnitControl/queryUnit?name='+this.name).
                    then(function (response){
                        var arr=response.data;
                        app1.datalist=arr;
                    }).catch(function (error) {
 
                    })
                },
                del:function (e) {
         
                    axios.get('/test/UnitControl/deleteUnit?id='+e)
                        .then(function (response) {
                            app1.getdataList();
							//异步请求中：访问data中的数据不能用this.使用vue对象如：app1
							app1.returnmsg=response.data.msg; //将json返回的消息付给变量去显示
                        }).catch(function (error) {
 
                    })
                },
				resetfun:function(){
					this.name='';
					app1.getdataList();
				},
				 //选中删除
				delALLData:function(){
					
						axios.get('/test/UnitControl/deleteBatch?ck='+this.checkList)
							.then(function (response) {
								app1.getdataList();
								//异步请求中：访问data中的数据不能用this.使用vue对象如：app1
								app1.returnmsg=response.data.msg; //将json返回的消息付给变量去显示
							}).catch(function (error) {
 
						})
				},
				
				save: function () {
				    //发送异步请求修改数据
					axios({
					    method: 'POST',
					    url: '/test/UnitControl/updateUnit',
					    params: { //多个字段数据：依次写在下面
						    'id': this.rowtemplate.id,
					        'name':this.rowtemplate.name,
					       		},
					    headers: {
					      'Content-Type': 'application/x-www-form-urlencoded'
					    }
					} ).then(function (response) {
						    
							//异步请求中：访问data中的数据不能用this.使用vue对象如：app1
							app1.returnmsg=response.data.msg; //将json返回的消息付给变量去显示
						}).catch(function (error) {
		
						})
						
						//还原模板的值为空
						this.rowtemplate = { id: '', name: ''};
				},
				
	            //修改回显
				modify:function (items) {
					//回显将传来的记录放到模板数据里面：模板数据绑定下面的修改输入框去显示
					this.rowtemplate = items;
				},
								
				selectAll(event){
				  if (!event.currentTarget.checked) {
				   this.checkList = [];
				  } else { //实现全选
				   this.checkList = [];
				   this.datalist.forEach((item, i) =>{
				    this.checkList.push(item.id);
				   });
				  }
				 }
				

				 
              }
        });
    </script>
</body>
</html>

